<template>
  <div class="route_type">
    <div v-for="item in typeList" :key="item.id" :value="item.id"
      :class="{ 'choiced': item.id == state.choidId, 'unchoiced': item.id != state.choidId }"
      @click="handleRouteType(item.id)" style="float: left;padding: 0 10px;height:35px;cursor: pointer;">{{ item.name }}
      <template v-if="item.num > -1">({{item.num}})</template>
    </div>
  </div>
</template>

<script setup>
import { def } from '@vue/shared';
import { reactive } from 'vue'
const emit = defineEmits(['handleTypeChange'])

const props = defineProps({
  bottomLine: {
    type: Boolean,
    default: false
  },
  choidId: {
    type: Number,
    default: 0
  },
  typeList: {
    type: Array,
    default: [{ id: 0, name: '集装箱' }, { id: 5, name: '租赁' }, { id: 10, name: '客服' }, { id: 15, name: '财务' }]
  }
})

const state = reactive({
  choidId: 0
})

function handleRouteType (val) {
  state.choidId = val
  const status = val ? val : null
  emit('handleTypeChange', status)
}
</script>

<style scoped>
.route_type {
  text-align: center;
  padding-top: 10px;
  width: 100%;
  font-size: 14px;
}

/* .route_type>span {
  padding: 0 30px 0 30px;
  float: left;
}

.route_type>span:hover {
  color: #2158F3;
  cursor: pointer;
} */

.choiced {
  color: #2158F3;
  border-bottom: #2158F3 2px solid;
}

.unchoiced {
  border-bottom: #EEEEEE 1px solid;
}
</style>